.image-shear{
   position: relative;
   display: inline-block;
    .move-box{
        position: relative;
        overflow: hidden;
        background:#fff;
        cursor: pointer;
        img{
            position: absolute;
            background-color: rgba(0, 0, 0, .5)
        }
    }

    canvas{
        cursor: pointer;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -50px;
        margin-top: -50px;
        z-index: 4;
    }
    .mask{
        position: absolute;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: .5;
        top: 0px;
        left: 0px;
        z-index: 2;
        cursor: pointer;
    }
    .mouse-target{
        position: absolute;
        width: 100%;
        height: 100%;


        top: 0px;
        left: 0px;
        z-index: 5;
        cursor: pointer;
    }
    .img-size{
        position: absolute;
        bottom: 10px;
        right: 10px;
        width: 20px;
        height: 50px;

        z-index: 6;
        text-align: center;
        .add{
            width: 20px;
            background: #fff;
            height: 20px;
            border-radius:10px;
            line-height: 19px;
            cursor:pointer;
            box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 30px, rgba(0, 0, 0, 0.23) 0px 6px 10px;
        }
        .sub{
            width: 20px;
            margin-top: 10px;
            height: 20px;
            background: #fff;
            border-radius:10px;
            line-height: 19px;
            cursor:pointer;
            box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 30px, rgba(0, 0, 0, 0.23) 0px 6px 10px;

        }
        .add:active{
             box-shadow:transparent 0px 0px 0px;
        }
        .sub:active{
           box-shadow:transparent 0px 0px 0px;
        }

    }
}
body {
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
}
